<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>同咨科技-商户后台</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../../static/css/weadmin.css">
    <link href="../../lib/layui/css/layui.css" rel="stylesheet">

    <script type="text/javascript" src="../../lib/layui/layui.js" charset="utf-8"></script>
    <script type="module" src="../components/use-body.js"></script>



    <link href="../../static/css/cost.css" rel="stylesheet">
    <link href="../../static/css/uselay.css" rel="stylesheet">
</head>

<body>
    <use-body>
        <div class="page-body cost">
            <div class="firstLine">


            </div>

            <div class="layoutLR second">
                <div class="side">
                    <div class="back-page">
                        <i class="iconfont use-arrow"></i> 返回造价大厅
                    </div>
                    <div class="layui-panel">
                        <ul class="layui-menu" id="demo-menu">
                            <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: false}">
                                <ul>
                                    <li class="layui-menu-item-checked">
                                        <div class="layui-menu-body-title"><a href="#anchor1">清单信息</a></div>
                                    </li>
                                    <li>
                                        <div class="layui-menu-body-title"><a href="#anchor2">基价录入</a></div>
                                    </li>
                                    <li>
                                        <div class="layui-menu-body-title"><a href="#anchor3">人工费调差</a></div>
                                    </li>
                                    <li>
                                        <div class="layui-menu-body-title"><a href="#anchor4">材料设备录入</a></div>
                                    </li>
                                    <li>
                                        <div class="layui-menu-body-title"><a href="#anchor5">总价措施一览表</a></div>
                                    </li>
                                    <li>
                                        <div class="layui-menu-body-title"><a href="#anchor6">规费</a></div>
                                    </li>
                                    <li>
                                        <div class="layui-menu-body-title"><a href="#anchor7">税金</a></div>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="right ">
                    <div class="page-border">
                        <div class="layoutLR">
                            <div class="text">
                                <span><strong>新建清单</strong></span>
                            </div>
                            <div>

                                <!-- 编辑状态 -->
                                <button type="button" class="layui-btn layui-btn-primary layui-btn-normal layui-btn-sm layui-btn-radius">
                                    取消</button>
                                <button type="button" class="layui-btn layui-btn-primary layui-btn-normal layui-btn-sm layui-btn-radius">
                                    发布并添加下一个</button>
                                <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-btn-radius">
                                    发布清单</button>

                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="page-border">
                            <div class="title" id="anchor1">
                                <span>清单信息录入</span>
                            </div>

                            <form class="layui-form" action="">
                                <div class="layui-row">
                                    <div class="layui-col-md4">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label required">清单编号</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="username" lay-verify="required"
                                                    placeholder="请输入" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-md8">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label required">清单名称</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="username" lay-verify="required"
                                                    placeholder="请输入" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-md4">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label required">工程量单位</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="username" lay-verify="required"
                                                    placeholder="请输入" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-md4">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label required">工程量</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="username" lay-verify="required"
                                                    placeholder="请输入" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-md4">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label required">编制人</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="username" lay-verify="required"
                                                    placeholder="编制人不允许修改，默认为姓名+账号，后台" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-md4">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label required">清单类别</label>
                                            <div class="layui-input-block">
                                                <select></select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-md4">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label required">计税方法</label>
                                            <div class="layui-input-block">
                                                <select></select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-md4">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label required">适用阶段</label>
                                            <div class="layui-input-block">
                                                <select></select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-md4">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label required">适用地区</label>
                                            <div class="layui-input-block">
                                                <select></select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-md4">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label required">适用时间</label>
                                            <div class="layui-input-block">
                                                <select></select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-md4">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label required">显示范围</label>
                                            <div class="layui-input-block">
                                                <select></select>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="layui-row">
                                    <div class="layui-col-md6">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label required">清单特征</label>
                                            <div class="layui-input-block">
                                                <textarea placeholder="请输入内容" lay-verify="required"
                                                    class="layui-textarea"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-md6">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label required">工程量计算规则</label>
                                            <div class="layui-input-block">
                                                <textarea placeholder="请输入内容" lay-verify="required"
                                                    class="layui-textarea"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-row">
                                    <div class="layui-col-md6">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label required">计算规则</label>
                                            <div class="layui-input-block">
                                                <textarea placeholder="请输入内容" lay-verify="required"
                                                    class="layui-textarea"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-md6">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label required">清单说明</label>
                                            <div class="layui-input-block">
                                                <textarea placeholder="请输入内容" lay-verify="required"
                                                    class="layui-textarea"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label required">关键词</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="username" lay-verify="required"
                                            placeholder="请输入内容" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </form>

                            <div class="title" id="anchor2">
                                <span>基价录入</span>
                            </div>
                            <form class="layui-form" action="">
                                <div class="layui-row">
                                    <div class="layui-col-md4">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label required">计价依据分类</label>
                                            <div class="layui-input-block">
                                                <select></select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-md4">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label required">计价依据名称</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="username" lay-verify="required"
                                                    placeholder="请输入" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-md4">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label required">版本号</label>
                                            <div class="layui-input-block">
                                                <select></select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label required">定额信息</label>
                                </div>
                                <div class="table-bg">
                                    <table class="layui-hide" id="ID-table-demo-data"></table>
                                    <div class="table-add-btn">
                                        <i class="iconfont use-add"></i>
                                        添加
                                    </div>
                                    <div class="statistics">
                                        <div style="width: 560px;">小计</div>
                                        <div style="width: 140px;">759.45</div>
                                        <div style="width: 140px;">7377.47</div>
                                        <div style="width: 140px;">27.31</div>
                                        <div style="width: 140px;">101.47</div>
                                        <div style="width: 140px;">101.47</div>
                                    </div>
                                </div>

                            </form>

                            <div class="title" id="anchor3">
                                <span>人工费调差</span>
                            </div>
                            <form class="layui-form" action="">
                                <div class="layui-row">
                                    <div class="layui-col-md4">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label required">人工费分类名称</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="username" lay-verify="required"
                                                    placeholder="请输入" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-md4">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label required">调差百分比</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="username" lay-verify="required"
                                                    placeholder="请输入" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </form>

                            <div class="title" id="anchor4">
                                <span>材料设备录入</span>
                            </div>
                            <div class="table-bg">
                                <table class="layui-hide" id="ID-table-demo-data2"></table>
                                <div class="table-add-btn">
                                    <i class="iconfont use-add"></i>
                                    添加
                                </div>
                                <div class="statistics">
                                    <div style="width: 560px;">材料费单价</div>
                                    <div style="width: 140px;">759.45</div>
                                    <div style="width: 140px;">7377.47</div>
                                    <div style="width: 140px;">27.31</div>
                                </div>
                            </div>

                            <div class="title" id="anchor5">
                                <span>总价措施一览表</span>
                            </div>
                            <form class="layui-form" action="">
                                <div class="layui-row">
                                    <div class="layui-col-md4">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label required">计费基数选择</label>
                                            <div class="layui-input-block">
                                                <select></select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-md4">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label required">计费基价</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="username" lay-verify="required"
                                                    placeholder="请输入" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </form>
                            <table class="layui-table layui-table-bg" lay-skin="nob">
                                <thead>
                                    <tr>
                                        <th>序号</th>
                                        <th>费用编号</th>
                                        <th>费用名称</th>
                                        <th>费率（%）</th>
                                        <th>金额</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <p contenteditable>孟子</p>
                                        </td>
                                        <td>华夏</td>
                                        <td>穷则独善其身，达则兼济天下</td>
                                        <td>华夏</td>
                                        <td>华夏</td>
                                        <td>
                                            <button type="button" class="layui-btn layui-btn-radius">查询</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="3">小计</td>
                                        <td>22</td>
                                        <td>333</td>
                                        <td>
                                            <button type="button" class="layui-btn layui-btn-radius">保存为模板</button>
                                            <button type="button" class="layui-btn layui-btn-primary layui-btn-radius">清空</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>

                            <div class="title" id="anchor6">
                                <span>规费</span>
                                
                            </div>
                            <form class="layui-form" action="">
                                <div class="layui-row">
                                    <div class="layui-col-md4">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label required">规费费率（%）</label>
                                            <div class="layui-input-block">
                                                <select></select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-md4">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label required">规费金额（元）</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="username" lay-verify="required"
                                                    placeholder="请输入" autocomplete="off" class="layui-input">
                                                    
                                            </div>
                                        </div>
                                       
                                    </div>
                                    <div class="layui-col-md4">
                                        <span class="layui-font-gray" style="margin-left: 10px; line-height: 38px;">规费包括：社保费和住房公积金，计费基数为定额人工费</span>
                                    </div>
                                    
                                </div>
                                
                            </form>

                            <div class="title" id="anchor7">
                                <span>税金</span>
                            </div>
                            <table class="layui-table layui-table-bg" lay-skin="nob">
                                <thead>
                                    <tr>
                                        <th>序号</th>
                                        <th>费用编号</th>
                                        <th>费用名称</th>
                                        <th>费率（%）</th>
                                        <th>金额</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>孟子</td>
                                        <td>华夏</td>
                                        <td>穷则独善其身，达则兼济天下</td>
                                        <td>华夏</td>
                                        <td>华夏</td>
                                        <td>
                                            <button type="button" class="layui-btn layui-btn-radius">查询</button>
                                            <button type="button" class="layui-btn layui-btn-primary layui-btn-radius">清空</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="3">税金小计</td>
                                        <td>22</td>
                                        <td>333</td>
                                        <td></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="btn-center">
                        <button type="button" class="layui-btn layui-btn-primary layui-btn-radius">取消</button>
                        <button type="button" class="layui-btn layui-btn-radius">保存并添加下一个</button>
                        <button type="button" class="layui-btn layui-btn-radius">保存清单</button>
                    </div>

                </div>

            </div>
    </use-body>
</body>

<!-- 工具栏模板 -->
<script type="text/html" id="operate-btn">
    <div class="operate-btn">
      <i class="iconfont use-edit layui-btn btn-text"></i>
      <i class="iconfont use-delete layui-btn btn-text"></i>
    </div>
  </script>
<script>
    layui.use('table', function () {
        var $ = layui.$;
        var table = layui.table;
        var util = layui.util;
        var form = layui.form;
        var upload = layui.upload;
        var laydate = layui.laydate;
        laydate.render({
            elem: '#ID-laydate-range',
            range: ['#ID-laydate-start-date', '#ID-laydate-end-date']
        });
        util.on('lay-on', {
            'add-dialog': function () {
                layer.open({
                    type: 1,
                    shade: false, // 不显示遮罩
                    content: $('#ID-test-layer-wrapper'), // 捕获的元素
                    title: '新建任务',
                    closeBtn: 1,
                    end: function () {
                        // layer.msg('关闭后的回调', {icon:6});
                    }
                });
            },
        })
        const data = [{ // 赋值已知数据
            "id": "10001",
            "username": "张三1",
            "sex": "男",
            "city": "浙江杭州",
            "sign": "人生恰似一场修行",
            "experience": "116"
        }, {
            "id": "10002",
            "username": "张三2",
            "sex": "男",
            "city": "浙江杭州",
            "sign": "人生恰似一场修行",
            "experience": "12",
            "LAY_CHECKED": true
        }, {
            "id": "10003",
            "username": "张三3",
            "sex": "男",
            "city": "浙江杭州",
            "sign": "人生恰似一场修行",
            "experience": "65"
        }, {
            "id": "10004",
            "username": "张三4",
            "sex": "男",
            "city": "浙江杭州",
            "sign": "人生恰似一场修行",
            "experience": "777"
        }, {
            "id": "10005",
            "username": "张三5",
            "sex": "男",
            "city": "浙江杭州",
            "sign": "人生恰似一场修行",
            "experience": "86"
        }, {
            "id": "10006",
            "username": "张三6",
            "sex": "男",
            "city": "浙江杭州",
            "sign": "人生恰似一场修行",
            "experience": "12"
        }, {
            "id": "10007",
            "username": "张三7",
            "sex": "男",
            "city": "浙江杭州",
            "sign": "人生恰似一场修行",
            "experience": "16"
        }, {
            "id": "10008",
            "username": "张三8",
            "sex": "男",
            "city": "浙江杭州",
            "sign": "人生恰似一场修行",
            "experience": "106"
        }]
        // 已知数据渲染
        var inst = table.render({
            elem: '#ID-table-demo-data',
            cols: [[ //标题栏
                { field: 'id', title: '定额编号', align: 'center', edit: 'text', width: 140 },
                { field: 'username', title: '定额名称', align: 'center', edit: 'text', width: 140 },
                { field: 'username', title: '单位', align: 'center', edit: 'text', width: 140 },
                { field: 'username', title: '数量', align: 'center', edit: 'text', width: 140 },
                { field: 'username', title: '定额人工费', align: 'center', edit: 'text', width: 140 },
                { field: 'username', title: '定额材料费', align: 'center', edit: 'text', width: 140 },
                { field: 'username', title: '定额机械费', align: 'center', edit: 'text', width: 140 },
                { field: 'username', title: '管理费', align: 'center', edit: 'text', width: 140 },
                { field: 'username', title: '利润', align: 'center', edit: 'text', width: 140 },
                { width: 160, title: '操作', templet: '#operate-btn' }
            ]],
            data,
            skin: 'nob', // 表格风格
            //even: true,
            page: false
        });

        table.render({
            elem: '#ID-table-demo-data2',
            cols: [[ //标题栏
                { field: 'id', title: '序号', align: 'center', edit: 'text', width: 140 },
                { field: 'username', title: '材料设备编号', align: 'center', edit: 'text', width: 140 },
                { field: 'username', title: '单位', align: 'center', edit: 'text', width: 140 },
                { field: 'username', title: '数量', align: 'center', edit: 'text', width: 140 },
                { field: 'username', title: '单价', align: 'center', edit: 'text', width: 140 },
                { field: 'username', title: '合价', align: 'center', edit: 'text', width: 140 },
                { field: 'username', title: '暂估价', align: 'center', edit: 'text', width: 140 },
                { field: 'username', title: '是否暂估', align: 'center', edit: 'text', width: 140 },
                { width: 160, title: '操作', templet: '#operate-btn' }
            ]],
            data,
            skin: 'nob', // 表格风格
            //even: true,
            page: false
        });

        table.render({
            elem: '#ID-table-demo-data3',
            cols: [[ //标题栏
                { field: 'id', title: '序号', align: 'center', },
                { field: 'username', title: '费用编号', align: 'center', },
                { field: 'username', title: '费用名称', align: 'center', },
                { field: 'username', title: '费率（%）', align: 'center', },
                { field: 'username', title: '金额', align: 'center', },
                { width: 160, title: '操作', templet: '#operate-btn2' }
            ]],
            data,
            skin: 'nob', // 表格风格
            //even: true,
            page: false
        });

        table.render({
            elem: '#ID-table-demo-data4',
            cols: [[ //标题栏
                { field: 'id', title: '序号', align: 'center', },
                { field: 'username', title: '费用编号', align: 'center', },
                { field: 'username', title: '费用名称', align: 'center', },
                { field: 'username', title: '费率（%）', align: 'center', },
                { field: 'username', title: '金额', align: 'center', },
                { width: 160, title: '操作', templet: '#operate-btn2' }
            ]],
            data,
            skin: 'nob', // 表格风格
            //even: true,
            page: false
        });



        laydate.render({
            elem: '.laydate'
        });

        $('.collapseBtn').click(function () {
            $(this).find('.layui-icon').toggleClass('layui-icon-down')
            $('.filters .item').each(function (index, i) {
                if (index > 2) {
                    $(i).toggle()
                }
            })
        })

        $('.layui-table-sort-asc').click(function () {
            $(this).parent().attr("lay-sort", "asc")
        })

        $('.layui-table-sort-desc').click(function () {
            $(this).parent().attr("lay-sort", "desc")
        })
    });
</script>

</html>